<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta charset="utf-8">
    <title>小说分类信息管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <style>
        .systemnovel-con .layui-table-view {
            border: none;
        }
        
        .systemnovel-con .layui-table-box {
            margin-top: 10px;
        }
        
        .systemnovel-con {
            padding: 0 15px 15px 15px;
            margin-bottom: 50px;
        }
        
        .systemnovel-con .layui-table-tool-self {
            display: none;
        }
        
        .systemnovel-con .not_border_left {
            border-left:none !important;
        }
        
        .systemnovel-con .hide {
            display: none;
        }
        
        .systemnovel-con .show {
            display: block;
        }
        
        .systemnovel-con .btn_size {
            height: 28px !important;
            line-height: 28px !important;
        }
        
        .systemnovel-con .layui-table-body table tbody .layui-table-hover {
            background: #fffdd3 !important;
        }
        
        .systemnovel-con .layui-table-body table tbody .layui-table-click {
            background: #fdef9b !important;
        }
        
        .systemnovel-con .layui-table,
        .layui-table-view {
            border: none;
            margin-top: 0;
        }
        
        .adminuserdetail {
            padding: 20px;
            display: none;
        }
        
        .adminuserdetail table tr td {
            padding: 15px;
            text-align: center;
        }
        
        .adminuserdetail .tdbck {
            background: #f2f2f2;
            width: 30%;
        }
    </style>
</head>

<body>
	<!--弹框调用内容Start-->
	<div id="adminuserdetail" class="adminuserdetail">			
		<table class="layui-table">
		    <tbody>
		      <tr>
		        <td class="tdbck">小说名称</td>
		        <td><span id="txtclaid"></span></td>
		      </tr>
		      <tr>
		        <td class="tdbck">小说作者</td>
		        <td><span id="txtadminuserrealname"></span></td>
		      </tr>
		      <tr>
		        <td class="tdbck">小说类型</td>
		        <td><span id="txtadminuserusertype"></span></td>
		      </tr>
		      <tr>
		        <td class="tdbck">小说简介</td>
		        <td colspan="4"><span id="txtadminuserdesc"></span></td>
		      </tr>
		      <tr>
		        <td class="tdbck">小说状态</td>
		        <td><span id="txtadmincreatetime"></span></td>
		      </tr>
		    </tbody>
		  </table>
	</div>
	<div id="adminuserdetail2" class="adminuserdetail">			
		<blockquote class="layui-elem-quote not_border_left">
            <form class="layui-form" action="">
            	<div class="layui-input-inline">
            		<select id="setnoveltype">
            		
            		</select>
            	</div>
            </form>
        </blockquote>
	</div>
	<!--弹框调用内容END-->
	
    <div class="systemnovel-con">
        <blockquote class="layui-elem-quote not_border_left">
            <form class="layui-form" action="">
            	<div class="layui-input-inline">
            		<select id="noveltype">
            		
            		</select>
            	</div>
                <div class="layui-input-inline">
                    <input type="text" name="novelName" id="novelName" placeholder="请输入书籍名称" class="layui-input" autocomplete="off">
                </div>
                <div class="layui-inline">
                    <button id="btnselfrontinfo" type="button" class="layui-btn layui-bg-blue">查询</button>
                </div>
            </form>
        </blockquote>

        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="selnovel">查看</a>
            <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="editnoveltype">更改小说类型</a>
		</script>

        <!-- 表格开始 -->
        <table class="layui-hide" name="noveltable" id="noveltable" lay-filter="noveltable"></table>
        <!-- 表格结束 -->

    </div>
    <script src="../js/jquery-3.3.1.js" charset="utf-8"></script>
    <script src="../layui/layui.js" charset="utf-8"></script>
    <script src="../js/loadselect.js" charset="utf-8"></script>
    <script>
    //加载小说分类信息
		 $(function() {
			$.ajax({
				url : "../getnoveltypelist",
				type : "POST",
				data : null,
				dataType : 'json',
				contentType : 'application/json;charset=UTF-8',//contentType 很重要
				success : function(e) {
					//alert(e.msg+"\n"+e.code+"\n"+ JSON.stringify(e));
					//alert(e.resultObject[1].name);
					var s = $("#noveltype").html();
					var str = "<option value='0'>请选择小说类型</option>";
					for(var i=0;i<e.resultObject.length;i++){
						str += "<option value="+e.resultObject[i].typename+">"+e.resultObject[i].typename+"</option>"
					}
					$("#noveltype").append(str);
					form.render("select");
				},
				error : function(e) {
					alert("error:"+e.msg);
				}
	
			}) 
		});
		$(function() {
			$.ajax({
				url : "../getnoveltypelist",
				type : "POST",
				data : null,
				dataType : 'json',
				contentType : 'application/json;charset=UTF-8',//contentType 很重要
				success : function(e) {
					//alert(e.msg+"\n"+e.code+"\n"+ JSON.stringify(e));
					//alert(e.resultObject[1].name);
					var s = $("#setnoveltype").html();
					var str = "<option value='0'>请选择小说类型</option>";
					for(var i=0;i<e.resultObject.length;i++){
						str += "<option value="+e.resultObject[i].id+">"+e.resultObject[i].typename+"</option>"
					}
					$("#setnoveltype").append(str);
					form.render("select");
				},
				error : function(e) {
					alert("error:"+e.msg);
				}
	
			}) 
		});
			
        layui.use(['table', 'form', 'layer', 'laydate', 'laytpl', 'element'], function() {
            var table = layui.table,
                form = layui.form,
                layer = layui.layer,
                $ = layui.jquery,
                laydate = layui.laydate,
                laytpl = layui.laytpl,
                element = layui.element;

            /*加载表格*/
            table.render({
                elem: '#noveltable',
                id: 'noveltableid',
                url: '../getnovel',
                title: '后台书籍信息数据表',
                height: "full-160",
                skin: 'line',
                even: true,
                cols: [
                    [{
						type : 'numbers',
						title : '序号',
						align : 'center',
						width : 80
					},{
                        field: 'novelname',
                        align: 'center',
                        title: '小说名称',
                    },{
                        field: 'novelid',
                        align: 'center',
                        title: '小说编号',
                        width:100
                    }, {
                        field: 'nickname',
                        align: 'center',
                        title: '作者',
                    }, {
                        field: 'typename',
                        align: 'center',
                        title: '小说类型',
                    }, {
                        field: 'abstrac',
                        align: 'center',
                        title: '小说简介'
                    }, {
                        field: 'novelstatus',
                        align: 'center',
                        title: '小说状态',
                        width:100
                    }, {
                        title: '操作',
                        toolbar: '#barDemo',
                        align: 'center',
                        width:260
                    }]
                ],
                page: {
                    layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'],
                    groups: 5,
                    limit: 10,
                    limits: [10, 20, 30, 40, 50],
                    theme: '#1E9FFF',
                },
            });
            /*加载表格结束*/

            /* 点击查询对网站用户进行筛选 */
			$("#btnselfrontinfo").click(function() {
				table.reload('noveltableid', {
					method : 'post',
					where : {
						'novelname' : $("#novelName").val().trim(),
						'typename' : $("#noveltype").val().trim(),
							},
					page : {
						curr : 1
						}
				});
			})
        /*点击查询加载表格数据结束*/
            
        //表格工具栏事件 
		table.on('tool(noveltable)',function(obj) {
			 var data = obj.data;
			$("#txtclaid").text(data.novelname);
			$("#txtadminuserrealname").text(data.nickname);
			$("#txtadminuserusertype").text(data.typename);
			$("#txtadminuserdesc").text(data.abstrac);
			$("#txtadmincreatetime").text(data.novelstatus);
			switch (obj.event) {
				case 'selnovel':
					layer.open({
				        type: 1, 
				        title: '小说分类信息详情',
				        area: ['600px', '500px'],
				        shade: 0.8,
				        content: $('#adminuserdetail'),
				        btn: ['返回'], 
				        yes: function(){
				          layer.closeAll();
				          $(".adminuserdetail one").css("display","none");
				        },
				        cancel: function(){ 
						  $(".adminuserdetail one").css("display","none");
						}
				    });
				break;
				case 'editnoveltype' :
				layer.open({
				        type: 1, 
				        title: '设置新的小说分类',
				        area: ['500px', '400px'],
				        shade: 0.8,
				        content: $('#adminuserdetail2'),
				        btn: ['确定','返回'], 
				        yes: function(){
				        typeid = $("#setnoveltype").val();
				          $.ajax({
			        		type: 'get',
			        		url: "../modifynoveltype?novelid=" + data.novelid+"&typeid="+typeid,
			        		dataType: 'json',
			        		success:function(data){
			        			if(data.code == "0"){
			        				layer.msg(data.msg, {
									  icon:1
									}, function(){
										table.reload("noveltableid", { //此处是上文提到的 初始化标识id
							                where: {
							                	keyword:data.code=='0'
							                }
							            });	
										layer.closeAll();
									});          				 
			        			}
			        			else{
			        				layer.msg(data.msg, {
										  icon:2
									});
			        			}
			        		},
			        		error:function(){
			        			layer.confirm('修改小说类型失败', {
									  btn: ['确定']
								});
			        		},
			        	});
				        },
				        cancel: function(){ 
						  $(".adminuserdetail two").css("display","none");
						}
				    });
				break;
			}
        });
    });
    
    </script>
</body>

</html>